<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"/>
    <link rel="stylesheet" href="css/amazeui.min.css">
    <link rel="stylesheet" href="css/animate.min.css">
    <link rel="stylesheet" href="css/style.css">
    <title>订单</title>
</head>
<body>
<header data-am-widget="header"
        class="am-header am-header-default" style="background-color: #FF856E;">
    <div class="am-header-left am-header-nav">
        <span style="font-size: 18px;color: white;">订单列表</span>
    </div>

</header>

<ul class="am-nav" id="orderList">

</ul>

<div class="am-modal am-modal-confirm" tabindex="-1" id="my-confirm">
    <div class="am-modal-dialog">
        <div class="am-modal-hd">我的订单</div>
        <div class="am-modal-bd">
            你，确定要删除这条记录吗？
        </div>
        <div class="am-modal-footer">
            <span class="am-modal-btn" data-am-modal-cancel>取消</span>
            <span class="am-modal-btn" data-am-modal-confirm>确定</span>
        </div>
    </div>
</div>
<div style="height: 60px;"></div>
<div data-am-widget="navbar" class="am-navbar am-cf am-navbar-default">
    <ul class="am-navbar-nav am-cf am-avg-sm-4" style="background-color: rgb(254,103,0)">
        <li>
            <a href="index.html" class="">
                <img src="img/home.svg" alt="首页"/>
                <span class="am-navbar-label">首页</span>
            </a>
        </li>
        <li>
            <a href="community.html" class="">
                <img src="img/community.svg" alt="小社区"/>
                <span class="am-navbar-label">小社区</span>
            </a>
        </li>

        <li>
            <div style="position: fixed;bottom: 2px;left: 40.3%;width: 19.2%;">
                <a href="createCommunity.html">
                    <img src="img/add.jpg"
                         style="width: 60px; height: 60px; border-radius: 50%;box-shadow: rgb(175,175,175) 0px -2px 10px 1px ;"/>
                </a>
            </div>
        </li>
        <li>
            <a href="javascript:0;" class="">
                <img src="img/order-this.svg" alt="订单"/>
                <span class="am-navbar-label" style="color: rgb(169,67,4)">订单</span>
            </a>
        </li>
        <li>
            <a href="me.html" class="">
                <img src="img/me.svg" alt="我的"/>
                <span class="am-navbar-label">我的</span>
            </a>
        </li>
    </ul>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/amazeui.min.js"></script>
<script src="js/main.js"></script>
</body>
<script>
    $(function () {
        getUserOrder();

        $('#orderList').find('.am-btn-link').on('click', function () {
            $('#my-confirm').modal({
                relatedTarget: this,
                onConfirm: function (options) {
                    const $link = $(this.relatedTarget).prev('a');
                    const orderId = $link.data('id');
                    const msg = deleteOrder(orderId)
                    if (msg == "success"){
                        alert(msg)
                        $("#" + orderId).remove();
                    }
                }
            });
        });
    })
</script>
</html>